<!--
    我的课程
    梁
    2019-5-6
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的课程
        div.courseBox
          router-link(:to="{name: 'PublicCourse'}")
            div.courseSize
              img(src="static/myCourse/u7320.png")
          div.course(v-for="item in courses")
            router-link(v-bind:to="{name: 'PublicCourse'}").courseA
              img(:src="item.img")
              span.hour 学分{{item.hour}}
              span.credit 课时{{item.credit}}
            p {{item.name}}
            p.brief {{item.brief}}
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'MyCourse',
    data() {
      return {
        courses: [
          {
            img: '/static/openness/u911.png',
            hour: 1,
            credit: 1,
            name: 'java课',
            brief: '萨达assassin大萨达大 大萨达'
          },
          {
            img: '/static/openness/u911.png',
            hour: 1,
            credit: 1,
            name: 'java课',
            brief: '萨达assassin大萨达大 大萨达'
          },
          {
            img: '/static/openness/u911.png',
            hour: 1,
            credit: 1,
            name: 'java课',
            brief: '萨达assassin大萨达大 大萨达'
          },
          {
            img: '/static/openness/u911.png',
            hour: 1,
            credit: 1,
            name: 'java课',
            brief: '萨达assassin大萨达大 大萨达'
          },
          {
            img: '/static/openness/u911.png',
            hour: 1,
            credit: 1,
            name: 'java课',
            brief: '萨达assassin大萨达大 大萨达'
          },
          {
            img: '/static/openness/u911.png',
            hour: 1,
            credit: 1,
            name: 'java课',
            brief: '萨达assassin大萨达大 大萨达'
          }
        ]
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0
  .box
    width 1200px
    margin 5px auto
  h1
    font-size 20px
    color #FF9933
    margin-bottom 36px

  .courseBox
    display flex
    flex-wrap wrap
  .courseSize
    width 170px
    height 210px
    border 1px solid #ccc
    padding 64px 0 0 44px
    box-sizing border-box
    border-radius 5px
    margin 0 50px 26px 0
    cursor pointer

  .course
    width 170px
    height 210px
    border 1px solid #ccc
    padding-top 120px
    box-sizing border-box
    border-radius 5px
    position relative
    margin 0 50px 26px 0
    p
      margin 20px 0 18px 12px
    .brief
      color #999
      font-size 14px
      word-break keep-all /* 不换行 */
      white-space nowrap /* 不换行 */
      overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
      text-overflow ellipsis

  .courseA
    width 170px
    height 120px
    position absolute
    top -1px
    left -1px
    img
      width 170px
      height 120px
    span
      display inline-block
      width 46px
      height 16px
      line-height 16px
      background rgba(0,0,0,0.5)
      color #fff
      border-radius 8px
      text-align center
      font-size 12px
      z-index 2

    .hour
      position absolute
      right 70px
      bottom 10px
    .credit
      position absolute
      right 10px
      bottom 10px

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933!important
    .text
      color #666666
      font-size 18px

</style>
